<template>
  <div class="body">
    <el-row :gutter="20" class="line1">
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <div class="module_title">产业运行指数走势总览</div>
          <yxzsEcharts></yxzsEcharts>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <div class="module_title">产业指数对比</div>
          <cyzsEcharts
            v-if="cyzsData.length > 0"
            :data="cyzsData"
          ></cyzsEcharts>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="line2">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <div class="module_title">产业集群</div>
          <cyjqMap
            style="width: 100%; height: 400px"
            v-if="cyjqData.length > 0"
            :data="cyjqData"
          ></cyjqMap>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <el-row :gutter="20" class="line2_1">
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <div class="module_title">近五年企业生产总值与GDP对比</div>
                <gdpEcharts
                  v-if="gdpData.length > 0"
                  :data="gdpData"
                ></gdpEcharts>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <div class="module_title">更新替代率</div>
                <div class="water_box">
                  <waterEcharts
                    v-if="waterData.length > 0"
                    :data="waterData"
                  ></waterEcharts>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="line2_1">
            <el-col :span="24">
              <div class="grid-content bg-purple">
                <div class="module_title">近五年产业增加值</div>
                <div class="jwn">
                  <div class="jwn_left">
                    <jwnEcharts1
                      v-if="jwnData1.length > 0"
                      :data="jwnData1"
                    ></jwnEcharts1>
                  </div>
                  <div class="jwn_right">
                    <jwnEcharts2
                      v-if="jwnData2.length > 0"
                      :data="jwnData2"
                    ></jwnEcharts2>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  queryHYLabelList,
  queryTotalIndustrialOnEveryAera,
  queryAvgCYZJZAndRate,
  queryIndustryKBInfo,
  selectIndustryIndexCompare,
  select5YearsFixGDP,
  queryCorpNewAndDeathRate,
} from "@/api/screen/index";

import yxzsEcharts from "./yxzsEcharts.vue";
import cyzsEcharts from "./cyzsEcharts.vue";
import gdpEcharts from "./gdpEcharts.vue";
import waterEcharts from "./waterEcharts.vue";
import jwnEcharts1 from "./jwnEcharts1.vue";
import jwnEcharts2 from "./jwnEcharts2.vue";
import cyjqMap from "./cyjqMap.vue";
export default {
  components: {
    yxzsEcharts,
    cyzsEcharts,
    gdpEcharts,
    waterEcharts,
    jwnEcharts1,
    jwnEcharts2,
    cyjqMap,
  },
  props: {
    data: {
      type: Array,
    },
  },
  data() {
    return {
      types: [],
      jwnLeft: [],
      jwnRight: [],
      cyzsData: [], //产业指数对比
      estateList: [], //  产业集群 产业列表
      cyjqData: [], // 产业集群 数据
      gdpData: [], // 近五年企业生产总值与GDP对比
      arrList: [], //右下角横向数据
      arrColorList: [], //右下角横向数据颜色
      jwnData1: [],
      jwnData2: [],
      waterData: [], //水波图
    };
  },
  watch: {
    data(newName, oldName) {
      //监听标签变化
      console.log(newName, "监听", oldName);
      if (newName !== oldName) {
        console.log("变了，要调接口了");
        this.estateList = this.data;
        this.types = this.data.map((item) => {
          return item.hylx;
        });

        setTimeout(() => {
          this.getIndexContrast();
          this.getJwnAddLeft();
          this.getJwnAddRight();
          this.getQueryCorpNewAndDeathRate();
        }, 500);
        setTimeout(() => {
          this.getSelect5YearsFixGDP();
          this.getQueryTotalIndustrialOnEveryAera();
        }, 1000);
      }
    },
  },
  created() {
    console.log(this.data, "this.data");
    this.estateList = this.data;
    this.types = this.data.map((item) => {
      return item.hylx;
    });
    this.getQueryHYLabelList();
    setTimeout(() => {
      this.getIndexContrast();
      this.getJwnAddLeft();
      this.getJwnAddRight();
      this.getQueryCorpNewAndDeathRate();
    }, 500);
    setTimeout(() => {
      this.getSelect5YearsFixGDP();
      this.getQueryTotalIndustrialOnEveryAera();
    }, 1000);
  },
  methods: {
    // 近五年产业增加值 左
    async getJwnAddLeft() {
      const res = await queryAvgCYZJZAndRate({
        types: this.types,
      });
      if (res.code == 200) {
        this.jwnData1 = [];
        this.$nextTick(() => {
          this.jwnData1 = res.data;
        });
      }
    },
    // 近五年产业增加值 右
    async getJwnAddRight() {
      const res = await queryIndustryKBInfo({
        types: this.types,
      });
      if (res.code == 200) {
        let arr2 = [[], [], []];
        // Group data by "lx" property
        const groupedData = {};
        res.data.forEach((item) => {
          const { lx, cyzjz } = item;
          if (!groupedData[lx]) {
            groupedData[lx] = { name: lx, value: [] };
          }
          groupedData[lx].value.push(cyzjz);
        });
        // Populate arr2 with grouped data
        for (const key in groupedData) {
          arr2[0].push(groupedData[key]);
        }
        // Add years to arr2
        arr2[1] = [...new Set(res.data.map((item) => item.years))];
        arr2[2] = [...new Set(res.data.map((item) => item.color))];
        this.arrList = arr2[0];
        this.arrColorList = arr2[2];
        this.jwnData2 = [];
        this.$nextTick(() => {
          this.jwnData2 = arr2;
        });
      }
    },
    //  产业指数对比
    async getIndexContrast() {
      console.log("到这里了");
      const res = await selectIndustryIndexCompare({
        types: this.types,
      });
      if (res.code == 200) {
        let arr1 = res.data.map((item) => {
          const { employIndex, riskIndex, operaIndex, proIndex } = item;
          const value = [employIndex, riskIndex, operaIndex, proIndex];
          const { lx: name } = item;
          return { value, name };
        });
        let arr2 = res.data.map((v) => v.color);
        this.cyzsData = [];
        this.$nextTick(() => {
          this.cyzsData = [arr1, arr2];
        });
      }
    },
    // 近五年企业生产总值与GDP对比
    async getSelect5YearsFixGDP() {
      const res = await select5YearsFixGDP();
      if (res.code == 200) {
        let year = res.data.map((v) => v.year);
        let gdp = res.data.map((v) => v.total);
        let gdpAdd = res.data.map((v) => v.gdpAddSpeed);
        this.gdpData = [];
        this.$nextTick(() => {
          this.gdpData = [year, this.arrColorList, gdp, gdpAdd, this.arrList];
        });
      }
    },
    //  产业集群 产业列表
    getQueryHYLabelList() {
      queryHYLabelList().then((res) => {
        if (res.code == 200) {
          this.estateList = res.rows;
          this.types = this.data.map((item) => {
            return item.hylx;
          });
        }
      });
    },
    // 产业集群 总
    async getQueryTotalIndustrialOnEveryAera() {
      const res = await queryTotalIndustrialOnEveryAera({
        types: this.types,
      });
      if (res.code == 200) {
        this.cyjqData = [];
        this.$nextTick(() => {
          this.cyjqData = [this.estateList, res.data];
        });
      }
    },
    // 更新替代率
    async getQueryCorpNewAndDeathRate() {
      const res = await queryCorpNewAndDeathRate({
        types: this.types,
      });
      if (res.code == 200) {
        this.waterData = [];
        this.$nextTick(() => {
          this.waterData = res.data;
          console.log(this.waterData, "this.waterData");
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.body {
  width: 100%;
  height: 100%;
  .line1 {
    height: 35%;
    .module_title {
      width: 100%;
      height: 50px;
      background-image: url("~img/zyqj_title.png");
      background-size: 100% 100%;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 25px;
      line-height: 25px;
      padding-left: 70px;
      color: #fff;
    }
  }
  .line2 {
    height: 65%;
    .module_title {
      width: 100%;
      height: 50px;
      background-image: url("~img/zyqj_title.png");
      background-size: 100% 100%;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 25px;
      line-height: 25px;
      padding-left: 70px;
      color: #fff;
    }
    .line2_1 {
      height: 50%;
      .module_title {
        width: 100%;
        height: 50px;
        background-image: url("~img/zyqj_title.png");
        background-size: 100% 100%;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 25px;
        line-height: 25px;
        padding-left: 70px;
        color: #fff;
      }
      .water_box {
        position: relative;
        width: 100%;
        height: 200px;
        .water1 {
          // background-image: url("~img/water-line.png");
          // background-size: 100% 100%;
          position: absolute;
          top: -20%;
          left: 10%;
        }
        .water2 {
          position: absolute;
          top: -10%;
          left: 37%;
        }
        .water3 {
          position: absolute;
          top: -20%;
          right: 10%;
        }
        .water4 {
          position: absolute;
          top: 35%;
          left: 20%;
        }
        .water5 {
          position: absolute;
          top: 35%;
          right: 20%;
        }
      }
      .jwn {
        display: flex;
        width: 100%;
        .jwn_left {
          width: 50%;
        }
        .jwn_right {
          width: 50%;
        }
      }
    }
  }
}
</style>
